<template>
    <div class="service">
        <div class="serviceA" style="border-radius: 5px 5px 0 0">
            <a href="http://wpa.qq.com/msgrd?v=3&uin=577405209&site=qq&menu=yes">
                <a-icon type="qq" style="font-size: 32px; color: #009688"/>
                <p>客服1</p></a
            >
        </div>
        <div class="serviceA">
            <a href="http://wpa.qq.com/msgrd?v=3&uin=577405209&site=qq&menu=yes">
                <a-icon type="qq" style="font-size: 32px; color: #009688"/>
                <p>客服2</p></a
            >
        </div>
        <div class="serviceA">
            <a href="http://wpa.qq.com/msgrd?v=3&uin=577405209&site=qq&menu=yes">
                <a-icon type="qq" style="font-size: 32px; color: #009688"/>
                <p>技术支持</p></a
            >
        </div>
    </div>
</template>
<script>
    export default {};
</script>
<style lang="less" scoped>
    .service {
        position: fixed;
        right: 20px;
        bottom: 35vh;
        width: 70px;
        height: 200px;
        z-index: 1;
    }
    .serviceA {
        width: 100%;
        height: 80px;
        color: #009688;
        text-align: center;
        background-color: #e6f7ff;
        border-top: 1px solid #d2f4f4;
        padding-top: 15px;
    }

    .serviceA:hover {
        background-color: #009688;

        .anticon  {
            background-color: white;
        }
    }

    .serviceA p {
        color: #00cf8c;
        font-size: 14px;
    }

    .serviceA:hover p {
        color: #fff;

    }
</style>